import { FontSize, Px2Dp } from "../../utils";
import Colors from "./template/colors";

export default {
    /**
     * 顶部导航栏 style Icon font
     */
    topNav: {
        style: {
            width: Px2Dp(750),
            height: Px2Dp(140),
        },
        Icon: Px2Dp(36),
        font: {
            selected: {
                fontSize: FontSize(18),
                color: Colors.fontWhite,
            },
            unselected: {
                fontSize: FontSize(16),
                color: Colors.fontWhite,
            }
        }
    },

    /**
     * 底部导航栏 大小 Img font
     */
    BottomNav: {
        style: {
            width: Px2Dp(750),
            height: Px2Dp(98),
        },
        img: {
            width: Px2Dp(50),
            height: Px2Dp(50),
        },
        font: {
            selected: {
                fontSize: FontSize(10),
                color: Colors.themeColor,
            },
            unselected: {
                fontSize: FontSize(10),
                color: Colors.fontGray1,
            }
        }
    },

    /**
    * 底部菜单栏 大小 Icon font
    */
    BottomMenu: {
        style: {
            width: Px2Dp(750),
            height: Px2Dp(98),
        },
        Icon: Px2Dp(40),
        font: {
            fontWhite: {
                fontSize: FontSize(15),
                color: Colors.fontWhite,
            },
            fontGray: {
                fontSize: FontSize(12),
                color: Colors.fontGray2,
            }
        },
    },

    /**
        * 标题栏 大小 Icon font
        */
    TitBar: {
        style: {
            width: Px2Dp(750),
            height: Px2Dp(128),
        },
        Icon: Px2Dp(36),
        font: {
            blackTit: {
                color: Colors.fontBlack,
                fontSize: FontSize(18),
            },
            whiteTit: {
                color: Colors.fontWhite,
                fontSize: FontSize(18),
            },
        }
    },

    /**
     * 二级导航栏 二等份 三等份 文字
     */
    SecNav: {
        Double: {
            style: {
                width: Px2Dp(750),
                height: Px2Dp(98),
            },
            font: {
                selected: {
                    fontSize: FontSize(16),
                    color: Colors.themeColor,
                },
                unselected: {
                    fontSize: FontSize(16),
                    color: Colors.fontBlack,
                }
            }
        },
        Triple: {
            style: {
                width: Px2Dp(750),
                height: Px2Dp(88),
            },
            font: {
                selected: {
                    fontSize: FontSize(15),
                    color: Colors.themeColor,
                },
                unselected: {
                    fontSize: FontSize(15),
                    color: Colors.fontBlack,
                }
            }
        }
    },

    /**
     * 下拉选择栏 大小 Icon font
     */
    DropDown: {
        style: {
            width: Px2Dp(750),
            height: Px2Dp(98),
        },
        Icon: Px2Dp(24),
        font: {
            fontSize: FontSize(15),
            color: Colors.fontBlack,
        }
    },

    /**
     * 题库列表
     */
    QuestionList: {
        width: Px2Dp(750),
        height: Px2Dp(120),
        paddingLeft: Px2Dp(30),
        paddingRight: Px2Dp(32),
    },
    /**
     * 课程列表 播放Icon 箭头Icon
     */
    CourseList: {
        style: {
            width: Px2Dp(750),
            height: Px2Dp(94),
            paddingLeft: Px2Dp(30),
            paddingRight: Px2Dp(30),
        },
        playIcon: Px2Dp(30),
        arrowIcon: Px2Dp(26),
    },

    /**
     * 主按钮 大 中 小 font
     */
    MainBtn: {

        big: {
            width: Px2Dp(690),
            height: Px2Dp(98),
            borderRadius: Px2Dp(45),
        },
        medium: {
            width: Px2Dp(630),
            height: Px2Dp(98),
            borderRadius: Px2Dp(45),
        },
        small: {
            width: Px2Dp(300),
            height: Px2Dp(98),
            borderRadius: Px2Dp(45),
        },
        font: {
            fontSize: FontSize(16),
            color: Colors.fontWhite,
        }
    },

    /**
     * 次按钮 大 小 font
     */
    MinorBtn: {
        big: {
            style: {
                width: Px2Dp(200),
                height: Px2Dp(55),
            },
            font: {
                fontSize: FontSize(18),
                color: Colors.fontWhite,
            }
        },
        small: {
            style: {
                width: Px2Dp(80),
                height: Px2Dp(40),
            },
            font: {
                font26Orange: {
                    fontSize: FontSize(13),
                    color: Colors.themeColor,
                },
                font24Orange: {
                    fontSize: FontSize(12),
                    color: Colors.themeColor,
                },
                font24White: {
                    fontSize: FontSize(12),
                    color: Colors.fontWhite,
                }
            }
        },
    },

    /**
     * 弹出框
     */
    Popover: {
        style: {
            width: Px2Dp(540),
            height: Px2Dp(270),
        },
        font: {
            tit: {
                fontSize: FontSize(18),
                color: Colors.fontBlack,
            },
            body: {
                fontSize: FontSize(15),
                color: Colors.fontGray2,
            },
            btn: {
                black: {
                    fontSize: FontSize(14),
                    color: Colors.fontBlack,
                },
                orange: {
                    fontSize: FontSize(14),
                    color: Colors.themeColor,
                },
            },
        }
    },
    /**
     * 输入框
     */
    Input: {
        style: {
            width: Px2Dp(690),
            height: Px2Dp(60),
        },
        font: {
            fontSize: FontSize(13),
            color: Colors.fontGray2,
        }
    },
    /**
     * 卡片
     */
    Card: {
        style: {
            width: Px2Dp(710),
            height: Px2Dp(346),
            paddingLeft: Px2Dp(30),
            paddingRight: Px2Dp(30),
        },
        portrait: {
            width: Px2Dp(60),
            height: Px2Dp(60),
        },
        icon:Px2Dp(30),
        font:{
            tit:{
                fontSize: FontSize(16),
                color: Colors.fontBlack,
            },
            price:{
                font30:{
                    fontSize: FontSize(15),
                    color: Colors.themeColor,
                },
                font48:{
                    fontSize: FontSize(24),
                    color: Colors.themeColor,
                },
            },
            font26:{
                fontSize: FontSize(13),
                color: Colors.fontGray2,
            },
            font24:{
                fontSize: FontSize(12),
                color: Colors.fontGray2,
            },
            font22:{
                fontSize: FontSize(11),
                color: Colors.fontGray2,
            },
        }
    },
}